<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common::common(title='基础数据')">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" ></meta>
</head>
<script type="text/javascript" th:src="@{/js/user/phoneUser.js}"></script>
<body>
<div id="app">
  <el-container style="margin-top:10px;">
	<el-header>
	    	<el-form ref="form" :model="queryData" label-width="80px">
		    	<el-row :gutter="20">
				  <el-col :span="6">
				  		<el-form-item label="名称">
					  		<el-input  placeholder="请输入名称" v-model="queryData.itemName" clearable>
							</el-input>
						</el-form-item>
				  </el-col>
				  <el-col :span="6">
				  		<el-form-item label="编码">
					  		<el-input placeholder="请输入编码" v-model="queryData.itemCode" clearable>
							</el-input>
						</el-form-item>
				  </el-col>
				  <el-col :span="6">
				  	<el-button type="primary" icon="el-icon-search" @click="query">查询</el-button>
				  </el-col>
				</el-row>
	    	</el-form>
	    </el-header>
	    <el-main style="padding:5px;">
	    	<div style="margin:10px">
				<el-button type="primary" size="medium" icon="el-icon-plus" @click="addItem">增加</el-button>
	    		<el-button type="primary" size="medium" icon="el-icon-edit" @click="editItem">编辑</el-button>
				<el-button type="primary" size="medium" icon="el-icon-delete" @click="deleteItem">删除</el-button>
	    	</div>
	    	<div style="margin:10px;">
	    	  <el-table  
	    	    ref="phoneUserDatagrid" 
	    	    :data="datagrid"
			    tooltip-effect="dark"
			    style="width: 100%;"
			    max-height="300"
			    @row-click="datagridSelect"
			    border
			    highlight-current-row
			    >
			    <el-table-column type="index" width="30"></el-table-column>
				    <el-table-column prop="id" label="ID" width="100"> </el-table-column>
				    <el-table-column prop="userName" label="用户名" width="100"> </el-table-column>
				    <el-table-column prop="password" label="密码" width="100"> </el-table-column>
				    <el-table-column prop="userPhone" label="手机号" width="100"> </el-table-column>
				    <el-table-column prop="activeFlag" label="有效标记(默认为1有效 0无效）" width="100"> </el-table-column>
				    <el-table-column prop="createBy" label="创建人ID" width="100"> </el-table-column>
				    <el-table-column prop="createByName" label="创建人姓名" width="100"> </el-table-column>
				    <el-table-column prop="createDate" label="创建时间" width="100"> </el-table-column>
				    <el-table-column prop="modifiedBy" label="修改人ID" width="100"> </el-table-column>
				    <el-table-column prop="modifiedByName" label="修改人姓名" width="100"> </el-table-column>
				    <el-table-column prop="modifiedDate" label="修改时间" width="100"> </el-table-column>
			  </el-table>
			</div>
			<div style="margin:10px">
			    <el-pagination
			      :current-page="queryData.page"
			      :page-sizes="[10, 20, 40, 100]"
			      :page-size="queryData.rows"
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="totalNum"
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			      @prev-click="handlePrevClick"
			      @next-click="handleNextClick">
			    </el-pagination>
			 </div>
	    </el-main>
	</el-container>
	<!-- dialog 开始 不需要【删除】 -->
	<el-dialog :visible.sync="dialogConfig.dialogFormVisible" top="1vh" :close-on-click-modal="false" :show-close="false">
		  <el-form :model="addData" ref="dialogForm" :rules="rules">
	      	<el-form-item label="ID" prop="id" 
	      		:label-width="dialogConfig.formLabelWidth">
		      <el-input v-model="addData.id"  auto-complete="off" style="width:220px;"></el-input>
		    </el-form-item>
	      	<el-form-item label="用户名" prop="userName" 
	      		:label-width="dialogConfig.formLabelWidth">
		      <el-input v-model="addData.userName"  auto-complete="off" style="width:220px;"></el-input>
		    </el-form-item>
	      	<el-form-item label="密码" prop="password" 
	      		:label-width="dialogConfig.formLabelWidth">
		      <el-input v-model="addData.password"  auto-complete="off" style="width:220px;"></el-input>
		    </el-form-item>
	      	<el-form-item label="手机号" prop="userPhone" 
	      		:label-width="dialogConfig.formLabelWidth">
		      <el-input v-model="addData.userPhone"  auto-complete="off" style="width:220px;"></el-input>
		    </el-form-item>
	      	<el-form-item label="有效标记(默认为1有效 0无效）" prop="activeFlag" 
	      		:label-width="dialogConfig.formLabelWidth">
		      <el-input v-model="addData.activeFlag"  auto-complete="off" style="width:220px;"></el-input>
		    </el-form-item>
	      	<el-form-item label="创建人ID" prop="createBy" 
	      		:label-width="dialogConfig.formLabelWidth">
		      <el-input v-model="addData.createBy"  auto-complete="off" style="width:220px;"></el-input>
		    </el-form-item>
	      	<el-form-item label="创建人姓名" prop="createByName" 
	      		:label-width="dialogConfig.formLabelWidth">
		      <el-input v-model="addData.createByName"  auto-complete="off" style="width:220px;"></el-input>
		    </el-form-item>
	      	<el-form-item label="创建时间" prop="createDate" 
	      		:label-width="dialogConfig.formLabelWidth">
		      <el-input v-model="addData.createDate"  auto-complete="off" style="width:220px;"></el-input>
		    </el-form-item>
	      	<el-form-item label="修改人ID" prop="modifiedBy" 
	      		:label-width="dialogConfig.formLabelWidth">
		      <el-input v-model="addData.modifiedBy"  auto-complete="off" style="width:220px;"></el-input>
		    </el-form-item>
	      	<el-form-item label="修改人姓名" prop="modifiedByName" 
	      		:label-width="dialogConfig.formLabelWidth">
		      <el-input v-model="addData.modifiedByName"  auto-complete="off" style="width:220px;"></el-input>
		    </el-form-item>
	      	<el-form-item label="修改时间" prop="modifiedDate" 
	      		:label-width="dialogConfig.formLabelWidth">
		      <el-input v-model="addData.modifiedDate"  auto-complete="off" style="width:220px;"></el-input>
		    </el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="closeDialog">取 消</el-button>
		    <el-button type="primary" @click="submitForm('dialogForm')">确 定</el-button>
		  </div>
	 </el-dialog>
	 <!-- dialog 结束 -->
</div>
</body>
</html>